<template>
  <view class="template-about tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <!-- <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar> -->
    
    <view class="my-info-body">
    <view class="top-backgroup">
      <image src='../../static/my_bg.png' mode='widthFix' class='backgroud-image'></image>
    </view>
    
    
    <!-- <button @click="navTuniaoHome">
      <view class="dong">
        <view class="monster">
          <view class="monster__face">
            <view class="monster__eye avatar-eye avatar-eye--green eye--left">
              <view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
            </view>
            <view class="monster__eye avatar-eye avatar-eye--violet eye--right">
              <view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
            </view>
            <view class="monster__noses">
              <view class="monster__nose"></view>
              <view class="monster__nose"></view>
            </view>
            <view class="monster__mouth">
              <view class="monster__top"></view>
              <view class="monster__bottom"></view>
            </view>
          </view>
        </view>
      </view>
    </button> -->
    
    
    
    <view class="about__wrap">
      
      <view class="tn-flex tn-flex-row-between tn-flex-col-center avatar-box">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center tn-flex-row-left">
            <!-- 图标logo -->
            <view class="logo-pic tn-shadow" >
              <view class="logo-image">
                <!-- <view class="tn-shadow-blur" :style="'background-image:url('+avatarUrl+');width: 120rpx;height: 120rpx;background-size: cover;'">
                </view> -->
				<tn-avatar class="avatar-clas" size="xl" shape="circle" :src="avatarUrl"></tn-avatar>
                <!-- <view class="tn-icon-logo-tuniao" style="font-size: 140rpx;color: #01BEFF;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);"></view> -->
              </view>
            </view>
            <view class="tn-padding-right">
              <view class="tn-padding-right tn-padding-left-sm tn-text-xxl" >
                {{userInfo.userId?userInfo.userName:'账号名称'}}
              </view>
              <view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis" style="color:#4E5F4F">{{userInfo.userId?userInfo.phone:'13333333333'}}</view>
            </view>
            
          </view>
        </view>
      </view>
	  
	  <view v-if="loginType == 2" class="card-info">
		  <view class="card-item" @click="goMydetailpage('/pages/my/myDetail')">
			  <view>
				  <image src="../../static/parent.png"></image>
			  </view>
			  <view class="card-item-label">
				  家长信息
			  </view>
		  </view>
		  <view class="card-item" @click="goMydetailpage('/pagesB/my/baobaoxinxi')">
			  <view>
				  <image src="../../static/baby.png"></image>
			  </view>
			  <view class="card-item-label">
				  宝宝信息
			  </view>
		  </view>
	  </view>
      
      <!-- 方式7 end-->
      
      
      <!-- 更多信息-->
      <view class="about-shadow">
		
		<tn-list-view :card="true" unlined="all">
			<tn-list-cell v-if="loginType == 1" :arrow="true" @click="goMydetailpage('/pages/my/myDetail')">
				<image src="../../static/icons/message.png" class="text-middle icon-size"></image>
				<text class="text-middle tn-margin-left">个人信息</text>
			</tn-list-cell>
			<tn-list-cell :arrow="true" @click="goMydetailpage('/pages/my/tongzhi')">
				<image src="../../static/icons/message.png" class="text-middle icon-size"></image>
				<text class="text-middle tn-margin-left">我的通知</text>
			</tn-list-cell>
			<tn-list-cell :arrow="true" @click="goLiuyanPage">
				<image src="../../static/icons/leaveWord.png" class="text-middle icon-size"></image>
				<text class="text-middle tn-margin-left">我的留言</text>
			</tn-list-cell>
			<tn-list-cell v-if="loginType == 1"  :arrow="true" @click="goMydetailpage('/pagesB/my/myKaoqin')">
				<image src="../../static/icons/dynamic.png" class="text-middle icon-size"></image>
				<text class="text-middle tn-margin-left">我的考勤</text>
			</tn-list-cell>
			<tn-list-cell :arrow="true" @click="goMydetailpage('/pagesB/my/wodedongtai')">
				<image src="../../static/icons/dynamic.png" class="text-middle icon-size"></image>
				<text class="text-middle tn-margin-left">我的动态</text>
			</tn-list-cell>
			<tn-list-cell :arrow="true" @click="showPwdlog">
				<image src="../../static/icons/modify.png" class="text-middle icon-size"></image>
				<text class="text-middle tn-margin-left">修改密码</text>
			</tn-list-cell>
			<tn-list-cell v-if="loginType == 2" :arrow="true">
				<image src="../../static/icons/concat.png" class="text-middle icon-size"></image>
				<text class="text-middle tn-margin-left">园长热线</text>
			</tn-list-cell>
			<tn-list-cell v-if="loginType == 2" :arrow="true">
				<image src="../../static/icons/about.png" class="text-middle icon-size"></image>
				<text class="text-middle tn-margin-left">关于我们</text>
			</tn-list-cell>
		</tn-list-view>
      </view>
    </view>  
    	<view class="__button " hover-class="tn-hover" :hover-stay-time="150" @click="tuichu">退出登录</view>
    </view>
	<tn-modal v-model="isShowpwdlog" :custom="true">
	  <view class="">
		<view class="pwdtitle">更改密码</view>
	    <view class="pwdcontent">
		
			<view class="login__body__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
			  <view class="login__body__item__input__left-icon">
			    <view class="tn-icon-phone"></view>
			  </view>
			  <view class="login__body__item__input__content">
			    <input maxlength="20" placeholder-class="input-placeholder" type="password" v-model="oldpwd" placeholder="请输入旧密码" />
			  </view>
			</view>	
			<view class="login__body__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
			  <view class="login__body__item__input__left-icon">
			    <view class="tn-icon-phone"></view>
			  </view>
			  <view class="login__body__item__input__content">
			    <input maxlength="20" placeholder-class="input-placeholder" type="password" v-model="newpwd1" placeholder="请设置6-20位新的登录密码" />
			  </view>
			</view>
			
			<view class="login__body__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
			  <view class="login__body__item__input__left-icon">
			    <view class="tn-icon-phone"></view>
			  </view>
			  <view class="login__body__item__input__content">
			    <input maxlength="20" placeholder-class="input-placeholder" type="password" v-model="newpwd2" placeholder="请再次输入新的登录密码" />
			  </view>
			</view>
		</view>
		<view class="pwdbtns tn-flex tn-flex-row-between">
			<tn-button backgroundColor="#E6E6E6" fontColor="#FFFFFF" @click="cancelpwd">取消</tn-button>
			<tn-button backgroundColor="tn-bg-indigo" fontColor="#FFFFFF" @click="submitpwd">确定</tn-button>
		</view>
		<tn-toast
		  ref="toast"
		></tn-toast>
	  </view>
	</tn-modal>
  </view>
</template>

<script>
	import md5 from '@/util/md5.js'
  export default {
    name: 'about-demo-2',
    components: { },
    data(){
      return {
		  avatarUrl: 'https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2',
		  loginType: 2,
		  userInfo: {},
		  unReadMsgCount: 0,
		  isShowpwdlog: false,
		  oldpwd: '',
		  newpwd1: '',
		  newpwd2: ''
      }
    },
	onShow() {
		this.setDatas();
		this.getList();
	},
	mounted(){
		this.setDatas();
		this.getList();
	},
    methods: {
		setDatas(){
				this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
				this.userInfo = uni.getStorageSync('userInfo');
				this.loginType = uni.getStorageSync('loginType');
				this.avatarUrl = this.imageTitle + this.userInfo.avatar;
		},
      // 跳转到
      navTuniaoHome(e) {
		  
      },
	  getList(){
	  	this.request({
	  		url: '/sysNotice/page',
	  		method: 'get',
	  		params: {
	  			pageNo: 1,
	  			pageSize: 10,
	  			isOnlySend: false
	  		},
	  	}).then(res => {
	  		if(res.code == 200){
				this.unReadMsgCount = res.data.totalQuantity;
	  		}
	  	})
	  },
	  tuichu(){
		  uni.reLaunch({
		  	url: '/pages/login/index'
		  })
	  },
	  goMydetailpage(url){
		  uni.navigateTo({
		  	url: url
		  })
	  },
	  showPwdlog(){
		  this.isShowpwdlog = true
	  },
	  cancelpwd(){
		  this.isShowpwdlog = false
				this.clearpwds()
	  },
	  submitpwd(){
		  if(!this.oldpwd){
			  this.$refs.toast.show({
			    title: '',
			    content: '请填写旧密码',
			    icon: '',
			    image: '',
			    duration: 1000
			  })
			return
		  }
			if(!this.newpwd1){
			  this.$refs.toast.show({
			    title: '',
			    content: '请填写新密码',
			    icon: '',
			    image: '',
			    duration: 1000
			  })
			return
		  }	
		 if(!this.newpwd2){
			  this.$refs.toast.show({
			    title: '',
			    content: '请再次填写新密码',
			    icon: '',
			    image: '',
			    duration: 1000
			  })
			return
		  }
		  if(this.newpwd1 !== this.newpwd2){
			  this.$refs.toast.show({
			      title: '',
			      content: '新密码不一致,请重新填写',
			      icon: '',
			      image: '',
			      duration: 1000
			    })
			  return
		  }
		  
		  let userInfo = uni.getStorageSync('userInfo');
		  this.request({
		  	url: '/SysUser/UpdatePwd',
		  	method: 'post',
			params: {
				id: userInfo.userId,
				password: this.oldpwd,
				newPassword: this.newpwd1
			}
		  }).then(res => {
			  console.log(res.data)
		  	if(res.code == 200){
				this.isShowpwdlog = false
				uni.showToast({
					title: '修改成功',
				    duration: 1000
				})
				this.clearpwds()
		  	}else{
				this.$refs.toast.show({
				    title: '',
				    content: res.message || '修改失败，请重试',
				    icon: '',
				    image: '',
				    duration: 1000
				  })
			}
		  })
	  },
	  clearpwds(){
		  
		  this.oldpwd = '';
		  this.newpwd1 = '';
		  this.newpwd2 = '';
	  },
	  goLiuyanPage(){
		  if(this.loginType == 1){
			  uni.navigateTo({
			  	url: '/pagesB/my/liuyan'
			  })
		  }else{
			  this.request({
			  	url: '/Conversation/List',
			  	method: 'get',
			  }).then(res => {
			  	if(res.code == 200){
					if(res.data.length == 1){
						uni.setStorageSync('liuyanDetail', res.data[0])
						uni.navigateTo({
							url: '/pagesB/my/liuyanDetail'
						})
					}else{
						uni.navigateTo({
							url: '/pagesB/my/jiazhangliuyan'
						})
					}
			  	}
			  })
		  }
	  },
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .template-about{
	  background-color: #f3f3f3;
	  height: calc(100vh - env(safe-area-inset-bottom) - 52px);
	  
	  .avatar-box{
		  background: rgba(255,255,255,0.20);
		  border-top: 2rpx solid #ffffff;
		  border-radius: 16rpx;
		  backdrop-filter: blur(25rpx);
		  padding: 32rpx;
		  margin-bottom: 20rpx;
	  }
	  
	  .card-info{
		  display: flex;
		  justify-content: space-between;
		  
		  .card-item{
			  padding:30rpx 60rpx 30rpx 30rpx;
			  background-color: #fff;
			  border-radius: 16rpx;
			  display: flex;
			  align-items: center;
			  
			  image{
				  width:96rpx;
				  height:96rpx
			  }
			  .card-item-label{
				  font-size: 32rpx;
				  color: #1d2129;
				  line-height: 48rpx;
				  margin-left: 24rpx;
			  }
		  }
	  }
	  .text-middle{
		  vertical-align: middle;
	  }
	  .icon-size{
		  width:48rpx;
		  height:48rpx
	  }
  }
  .my-info-body{
	  
	  
  }
  /* 顶部背景图 start */
  .top-backgroup {
    height: 350rpx;
    z-index: -1;
	overflow: hidden;
    .backgroud-image {
      width: 100%;
      height: 350rpx;
      // z-index: -1;
    }
  }
  /* 顶部背景图 end */
  
  /* 用户头像 start */
  .logo-image{
    width: 120rpx;
    height: 120rpx;
    position: relative;
    background-color: #FFFFFF;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
    overflow: hidden;
  }
  
  /* 页面 start*/
  .about-shadow{
    border-radius: 15rpx;
	margin-top: 20rpx;
    // box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .about {
    
    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 30rpx;
      margin-top: -230rpx;
    }
  }
  /* 页面 end*/
  
  .my-shadow{
      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
      border-radius: 20rpx;
  }
  
  /* 图标容器7 start */
  .icon7 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 10rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 0;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }    
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 40rpx;
        height: 40rpx;
        font-size: 28rpx;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
        }
      }
    }
  }
    /* 图标容器1 end */
    
    /* 底部tabbar start*/
    .footerfixed{
     position: fixed;
     width: 100%;
     bottom: 0;
     z-index: 999;
     background-color: #FFFFFF;
     box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    }
    
    .tabbar {
      display: flex;
      align-items: center;
      min-height: 110rpx;
      justify-content: space-between;
    	padding: 0;
    	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
    	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
    }
    
    .tabbar .action {
    	font-size: 22rpx;
    	position: relative;
    	flex: 1;
    	text-align: center;
    	padding: 0;
    	display: block;
    	height: auto;
    	line-height: 1;
    	margin: 0;
    	overflow: initial;
    }
    
    .tabbar .action .bar-icon {
    	width: 100rpx;
    	position: relative;
    	display: block;
    	height: auto;
    	margin: 0 auto 10rpx;
    	text-align: center;
    	font-size: 42rpx;
    }
    
    .tabbar .action .bar-icon image {
    	width: 50rpx;
    	height: 50rpx;
    	display: inline-block;
    }
	.pwdtitle{
		font-size: 30rpx;
		font-weight: 550;
		margin-bottom: 10px;
	}
	.pwdcontent{
		margin-bottom: 25px;
	}
    .pwdbtns{
		
	}
    
    /* 大嘴鸟*/
    .dong {
    	z-index: 9999;
    	position: fixed;
    	top: -40px;
    	right: -80px;
    	transform: scale(0.24);
    	-webkit-transform: scale(0.24);
    	-moz-transform: scale(0.24);
    
    }
    
    .monster {
    	transform: rotate(-50deg);
    	-ms-transform: rotate(-50deg);
    	/* IE 9 */
    	-moz-transform: rotate(-50deg);
    	/* Firefox */
    	-webkit-transform: rotate(-50deg);
    	/* Safari 和 Chrome */
    	-o-transform: rotate(-50deg);
    	/* Opera */
    	display: flex;
    	justify-content: center;
    	position: relative;
    	width: 170px;
    	height: 400px;
    	border-top-left-radius: 200px;
    	border-top-right-radius: 200px;
    	background-color: #3C47D7;
    	box-shadow: 20px 20px 60px #4650E5;
    }
    
    .monster__face {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	flex-direction: column;
    	position: absolute;
    	top: 14%;
    	width: 75%;
    	height: 160px;
    }
    
    .monster__noses {
    	top: 50%;
    	display: flex;
    	justify-content: space-between;
    	width: 28%;
    	height: auto;
    	margin-bottom: 10px;
    }
    
    .monster__nose {
    	width: 8px;
    	height: 12px;
    	border-radius: 20px;
    	background: rgba(0, 0, 0, 0.5);
    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
    }
    
    .monster__mouth {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	position: relative;
    	width: 100%;
    	height: 0%;
    	overflow: hidden;
    	border: 25px solid #FFC333;
    	border-radius: 100px;
    	background-color: #810332;
    	animation: mouth 1.75s infinite;
    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
    	box-sizing: border-box;
    }
    
    .monster__mouth::before {
    	content: '';
    	position: absolute;
    	width: 150px;
    	height: 80px;
    	border-radius: 100px;
    	background-color: #400018;
    }
    
    .monster__mouth::after {
    	content: '';
    	position: absolute;
    	bottom: -80px;
    	width: 160px;
    	height: 80px;
    	border-top-left-radius: 50%;
    	border-top-right-radius: 50%;
    	background-color: #DC1B50;
    	animation: tongue 1.75s infinite;
    }
    
    .monster__top {
    	position: absolute;
    	top: -30px;
    	width: 170px;
    	height: 30px;
    	border-bottom-left-radius: 10px;
    	border-bottom-right-radius: 10px;
    	background-color: #ffffff;
    	z-index: 100;
    	animation: t 1.75s infinite;
    }
    
    .monster__bottom {
    	position: absolute;
    	bottom: 0;
    	width: 100px;
    	height: 30px;
    	border-top-left-radius: 10px;
    	border-top-right-radius: 10px;
    	background-color: #ffffff;
    	z-index: 100;
    	animation: b 1.75s infinite;
    }
    
    
    .avatar-eye {
    	position: absolute;
    	top: -10%;
    	width: 65px;
    	height: 65px;
    	background: linear-gradient(105deg, white, #cb87f4);
    	border-radius: 100%;
    	box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
    	margin: 3px;
    	-webkit-transform: translateX(-50%);
    	transform: translateX(-50%);
    }
    
    
    .avatar-eye--green {
    	background: linear-gradient(to bottom, #fdfdfd, #c3efea);
    }
    
    .avatar-eye--violet {
    	background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
    }
    
    
    .eye--left {
    	left: 10%;
    }
    
    .eye--right {
    	left: 85%;
    }
    
    .eye--center {
    	left: 45%;
    	top: 10%;
    }
    
    .avatar-eye-pupil {
    	position: absolute;
    	width: 55%;
    	height: 55%;
    	left: 50%;
    	top: 25%;
    	-webkit-transform: translate(-50%);
    	transform: translate(-50%);
    	z-index: 100;
    	border-radius: 100%;
    }
    
    
    .pupil--green {
    	background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
    }
    
    .pupil--pink {
    	background: linear-gradient(135deg, #f1a183, #8535cd);
    }
    
    
    .avatar-eye-pupil-blackThing {
    	position: absolute;
    	width: 55%;
    	height: 55%;
    	left: 50%;
    	top: 25%;
    	background: #2c2f32;
    	-webkit-transform: translate(-50%);
    	transform: translate(-50%);
    	border-radius: 100%;
    	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    }
    
    .avatar-eye-pupil-lightReflection {
    	position: absolute;
    	width: 7px;
    	height: 7px;
    	left: 25%;
    	top: 10%;
    	background: #ebebeb;
    	-webkit-transform: translate(-50%);
    	transform: translate(-50%);
    	border-radius: 100%;
    	box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
    }
    
    /**/
    @keyframes t {
    
    	0%,
    	10%,
    	80%,
    	100% {
    		top: -30px;
    	}
    
    	20% {
    		top: 0px;
    	}
    
    	30% {
    		top: -20px;
    	}
    
    	40% {
    		top: -0px;
    	}
    
    	50% {
    		top: -25px;
    	}
    
    	70% {
    		top: 0px;
    	}
    }
    
    @keyframes b {
    
    	0%,
    	10%,
    	80%,
    	100% {
    		bottom: -30px;
    	}
    
    	20% {
    		bottom: 0px;
    	}
    
    	30% {
    		bottom: -20px;
    	}
    
    	40% {
    		bottom: -0px;
    	}
    
    	50% {
    		bottom: -25px;
    	}
    
    	70% {
    		bottom: 0px;
    	}
    }
    
    @keyframes mouth {
    
    	0%,
    	10%,
    	100% {
    		width: 100%;
    		height: 0%;
    	}
    
    	15% {
    		width: 90%;
    		height: 30%;
    	}
    
    	20% {
    		width: 50%;
    		height: 70%;
    	}
    
    	25% {
    		width: 70%;
    		height: 70%;
    	}
    
    	30% {
    		width: 80%;
    		height: 60%;
    	}
    
    	35% {
    		width: 60%;
    		height: 70%;
    	}
    
    	40% {
    		width: 55%;
    		height: 75%;
    	}
    
    	45% {
    		width: 50%;
    		height: 90%;
    	}
    
    	50% {
    		width: 40%;
    		height: 70%;
    	}
    
    	55% {
    		width: 70%;
    		height: 95%;
    	}
    
    	60% {
    		width: 40%;
    		height: 50%;
    	}
    
    	65% {
    		width: 100%;
    		height: 60%;
    	}
    
    	70% {
    		width: 100%;
    		height: 70%;
    	}
    
    	75% {
    		width: 90%;
    		height: 70%;
    	}
    
    	80% {
    		width: 50%;
    		height: 70%;
    	}
    
    	85% {
    		width: 90%;
    		height: 50%;
    	}
    
    	85% {
    		width: 40%;
    		height: 70%;
    	}
    
    	90% {
    		width: 90%;
    		height: 30%;
    	}
    
    	95% {
    		width: 100%;
    		height: 10%;
    	}
    }
    
    @keyframes tongue {
    
    	0%,
    	20%,
    	100% {
    		bottom: -80px;
    	}
    
    	30%,
    	90% {
    		bottom: -40px;
    	}
    
    	40% {
    		bottom: -45px;
    	}
    
    	50% {
    		bottom: -50px;
    	}
    
    	70% {
    		bottom: -80px;
    	}
    
    	90% {
    		bottom: -40px;
    	}
    }
    .list {
      &__left {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        
        &__icon, &__image {
          margin-right: 18rpx;
        }
      }
      
      &__right {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
    
    .list-icon-text, .list-image-text {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
	.__button {
	  margin:0 auto;
	  margin-top: 20rpx;
	  width: 90%;
	  height: 92rpx;
	  text-align: center;
	  font-size: 28rpx;
	  line-height: 92rpx;
	  letter-spacing: 1em;
	  text-indent: 1em;
	  border-radius: 16rpx;
	  color:#bbb;
	  background-color: #fff;
	  
	}
	
	.login{
		  position: fixed;
		  top: 45px;
		  right: 0;
		  bottom: 0;
		  left: 0;
		  background-color: rgba(245, 245, 245, 0.5);
		  
		  &__body{
			position: absolute; 
			width: 100%;
			top: 100rpx;
			padding: 0 5%;
			 &__item {
			   
			   &__input {
			     margin-top: 40rpx;
			     width: 100%;
			     height: 77rpx;
			     border: 1rpx solid #E6E6E6;
			     border-radius: 39rpx;
			     
			     &__left-icon {
			       width: 10%;
			       font-size: 44rpx;
			       margin-left: 20rpx;
			       color: #AAAAAA;
			     }
			     
			     &__content {
			       width: 80%;
			       padding-left: 10rpx;
			       
			       &--verify-code {
			         width: 56%;
			       }
			       
			       input {
			         font-size: 24rpx;
			         // letter-spacing: 0.1em;
			       }
			     }
			     
			     &__right-icon {
			       width: 10%;
			       font-size: 44rpx;
			       margin-right: 20rpx;
			       color: #AAAAAA;
			     }
			     &__right-image{
					 width: 100%;
					 max-height: 80rpx;
				 }
			     &__right-verify-code {
			       width: 34%;
			       margin-right: 20rpx;
			     }
			   }
			   
			   &__button {
			     margin-top: 75rpx;
			     margin-bottom: 39rpx;
			     width: 100%;
			     height: 77rpx;
			     text-align: center;
			     font-size: 31rpx;
			     font-weight: bold;
			     line-height: 77rpx;
			     letter-spacing: 1em;
			     text-indent: 1em;
			     border-radius: 39rpx;
			     box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
			   }
			}
		  }
	}
</style>
